<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" @click="addClickHandler">添加</el-button>
    <el-form :inline="true" :model="query" ref="queryForm"
             style="border-top:1px solid #dcdfe6;border-radius:2px;padding-top:20px;">
      <el-form-item label="影院名称：" prop="queryCinemaId">
        <dict-input dict-key="DICT_CINEMA" :current="query.cinema" @change="queryCinemaChangeHandler"></dict-input>
      </el-form-item>
      <el-form-item label="模块名称：" prop="queryModuleId">
        <dict-input dict-key="DICT_MODULE" :current="query.module" @change="queryModuleChangeHandler"></dict-input>
      </el-form-item>
      <el-form-item label="任务名称：" prop="queryTaskId">
        <dict-input dict-key="DICT_TASK" :current="query.task" @change="queryTaskChangeHandler"></dict-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="queryClickHandler">查询</el-button>
        <el-button icon="el-icon-brush" @click="queryClearClickHandler">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="scheduleId" label="调度ID" width="80px" fixed/>
      <el-table-column prop="cinemaCode" label="影院编码" width="100px"/>
      <el-table-column prop="cinemaName" label="影院名称" width="300px"/>
      <el-table-column prop="moduleCode" label="模块编码" width="100px"/>
      <el-table-column prop="moduleName" label="模块名称" width="150px"/>
      <el-table-column prop="taskCode" label="任务编码" width="150px"/>
      <el-table-column prop="taskName" label="任务名称" width="200px"/>
      <el-table-column prop="databaseId" label="数据ID" width="150px"/>
      <el-table-column prop="shortName" label="数据库简称" width="200px"/>
      <el-table-column prop="timeCron" label="调度时间" width="100px"/>
      <el-table-column prop="limitNum" label="最大数量" width="100px"/>
      <el-table-column prop="execTimeStart" label="开始时间" width="180px"/>
      <el-table-column prop="execTimeEnd" label="结束时间" width="180px"/>
      <el-table-column label="操作" fixed="right" width="200px">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit" @click.native.prevent="editClickHandler(scope.row)">编辑
          </el-button>
          <el-popconfirm title="确定删除吗？" @confirm="deleteClickHandler(scope.$index, scope.row)"
                         style="margin-left: 10px;">
            <el-button type="danger" size="mini" icon="el-icon-delete" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="total, prev, pager, next" style="padding-top: 10px;"
                   @current-change="pageChangeHandler"
                   :page-size="query.pageSize" :current-page="query.pageNumber" :total="query.total"/>

    <el-dialog title="提示" :visible.sync="isEditing" width="50%">
      <el-form :inline="true" :model="scheduleForm" ref="scheduleForm" class="scheduleForm" :rules="scheduleRules">
        <el-form-item label="影院名称：" label-width="120px" prop="cinema.id">
          <dict-input dict-key="DICT_CINEMA" :current="scheduleForm.cinema" @change="scheduleCinemaChangeHandler"/>
        </el-form-item>
        <el-form-item label="模块名称：" label-width="120px" prop="module.id">
          <dict-input dict-key="DICT_MODULE" :current="scheduleForm.module" @change="scheduleModuleChangeHandler"/>
        </el-form-item>
        <el-form-item label="任务名称：" label-width="120px" prop="task.id">
          <dict-input dict-key="DICT_TASK" :current="scheduleForm.task" @change="scheduleTaskChangeHandler"/>
        </el-form-item>
        <el-form-item label="数据库：" label-width="120px" prop="database.id">
          <dict-input dict-key="DICT_DATABASE" :current="scheduleForm.database"
                      @change="scheduleDatabaseChangeHandler"/>
        </el-form-item>
        <el-form-item label="CRON表达式：" label-width="120px" prop="timeCron">
          <el-input v-model="scheduleForm.timeCron" placeholder="请输入CRON表达式" maxlength="60" show-word-limit/>
        </el-form-item>
        <el-form-item label="查询数量：" label-width="120px" prop="limitNum">
          <el-select v-model="scheduleForm.limitNum" placeholder="请选择">
            <el-option v-for="limitNum in limitNumArray" :key="limitNum" :label="limitNum" :value="limitNum"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间：" label-width="120px" prop="execTimeStart">
          <el-date-picker v-model="scheduleForm.execTimeStart" type="datetime" placeholder="选择日期时间"
                          default-time="06:00:00" value-format="yyyy-MM-dd HH:mm:ss"/>
        </el-form-item>
        <el-form-item label="结束时间：" label-width="120px" prop="execTimeEnd">
          <el-date-picker v-model="scheduleForm.execTimeEnd" type="datetime" placeholder="选择日期时间"
                          default-time="06:00:00" value-format="yyyy-MM-dd HH:mm:ss"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelClickHandler">取消</el-button>
        <el-button type="primary" @click="saveClickHandler">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DictInput from "@/components/internal/dict/DictInput";
import $api from "@/api/api-schedule";

export default {
  name: "Schedule",
  components: {DictInput},
  data() {
    return {
      query: {
        cinema: {
          id: null,
          name: null
        },
        module: {
          id: null,
          name: null
        },
        task: {
          id: null,
          name: null
        },
        total: 0,
        pageSize: this.$store.state.pageSize,
        pageNumber: 1
      },
      tableData: [],
      isEditing: false,
      limitNumArray: [100, 200, 300, 400, 500, 600, 700, 800, 900,
        1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000],
      scheduleForm: {
        scheduleId: null,
        cinema: {
          id: null,
          name: null
        },
        module: {
          id: null,
          name: null
        },
        task: {
          id: null,
          name: null
        },
        database: {
          id: null,
          name: null
        },
        timeCron: null,
        limitNum: null,
        execTimeStart: null,
        execTimeEnd: null
      },
      scheduleRules: {
        'cinema.id': [
          {required: true, message: '请选择影院', trigger: 'change'}
        ],
        'module.id': [
          {required: true, message: '请选择模块', trigger: 'change'}
        ],
        'task.id': [
          {required: true, message: '请选择任务', trigger: 'change'}
        ],
        timeCron: [
          {required: true, message: '请输入CRON表达式', trigger: 'blur'}
        ],
        limitNum: [
          {required: true, message: '请选择查询数量', trigger: 'change', type: 'number'}
        ]
      }
    }
  },
  created() {
    this.queryClickHandler();
  },
  methods: {
    queryPageData() {
      let params = {
        cinemaId: this.query.cinema.id,
        moduleId: this.query.module.id,
        taskId: this.query.task.id,
        total: this.query.total,
        pageSize: this.query.pageSize,
        pageNumber: this.query.pageNumber
      };
      $api.page(params).then(page => {
        this.tableData = page.records;
        this.query.total = page.total;
      });
    },
    pageChangeHandler(num) {
      this.query.pageNumber = num;
      this.queryPageData();
    },
    queryCinemaChangeHandler(row) {
      this.query.cinema.id = row.id;
      this.query.cinema.name = row.name;
    },
    queryModuleChangeHandler(row) {
      this.query.module.id = row.id;
      this.query.module.name = row.name;
    },
    queryTaskChangeHandler(row) {
      this.query.task.id = row.id;
      this.query.task.name = row.name;
    },
    queryClickHandler() {
      this.query.total = 0;
      this.query.pageNumber = 1;
      this.queryPageData();
    },
    queryClearClickHandler() {
      this.$nextTick(() => {
        this.query.cinema.id = null;
        this.query.cinema.name = null;
        this.query.module.id = null;
        this.query.module.name = null;
        this.query.task.id = null;
        this.query.task.name = null;
      });
    },
    addClickHandler() {
      this.isEditing = true;
    },
    editClickHandler(row) {
      this.isEditing = true;
      this.$nextTick(() => {
        this.scheduleForm.scheduleId = row.scheduleId;
        this.scheduleForm.cinema.id = row.cinemaId;
        this.scheduleForm.cinema.name = row.cinemaName;
        this.scheduleForm.module.id = row.moduleId;
        this.scheduleForm.module.name = row.moduleName;
        this.scheduleForm.task.id = row.taskId;
        this.scheduleForm.task.name = row.taskName;
        this.scheduleForm.database.id = row.databaseId;
        this.scheduleForm.database.name = row.shortName;
        this.scheduleForm.timeCron = row.timeCron;
        this.scheduleForm.limitNum = row.limitNum;
        this.scheduleForm.execTimeStart = row.execTimeStart;
        this.scheduleForm.execTimeEnd = row.execTimeEnd;
      });
    },
    deleteClickHandler(index, row) {
      $api.del(row.scheduleId).then(() => {
        if (this.tableData.length <= 1) {
          this.query.pageNumber--;
        }
        this.queryPageData();
      });
    },
    scheduleCinemaChangeHandler(row) {
      this.scheduleForm.cinema.id = row.id;
      this.scheduleForm.cinema.name = row.name;
    },
    scheduleModuleChangeHandler(row) {
      this.scheduleForm.module.id = row.id;
      this.scheduleForm.module.name = row.name;
    },
    scheduleTaskChangeHandler(row) {
      this.scheduleForm.task.id = row.id;
      this.scheduleForm.task.name = row.name;
    }, scheduleDatabaseChangeHandler(row) {
      this.scheduleForm.database.id = row.id;
      this.scheduleForm.database.name = row.name;
    },
    saveClickHandler() {
      this.$refs.scheduleForm.validate().then(() => {
        let params = {
          scheduleId: this.scheduleForm.scheduleId,
          cinemaId: this.scheduleForm.cinema.id,
          moduleId: this.scheduleForm.module.id,
          taskId: this.scheduleForm.task.id,
          databaseId: this.scheduleForm.database.id,
          timeCron: this.scheduleForm.timeCron,
          limitNum: this.scheduleForm.limitNum,
          execTimeStart: this.scheduleForm.execTimeStart,
          execTimeEnd: this.scheduleForm.execTimeEnd
        };
        return $api.save(params);
      }).then(() => {
        this.queryPageData();
        this.cancelClickHandler();
      });
    },
    cancelClickHandler() {
      this.isEditing = false;
      this.$nextTick(() => {
        this.scheduleForm.scheduleId = null;
        this.$refs.scheduleForm.clearValidate();
        this.$refs.scheduleForm.resetFields();
      });
    }
  }
}
</script>

<style scoped>
.scheduleForm .el-input {
  width: 218px;
}
</style>
